<template>
    <div>
      <!--<zz-frame width="49.5%" height="40px" class="mb20 left" :padding="[17, 17, 17, 17]"></zz-frame>-->
      <!--<zz-frame width="49.5%" height="40px" class="mb20 right" :padding="[17, 17, 17, 17]"></zz-frame>-->
      <div class="search_table">
        <div class="search_table_left">
          <zz-frame width="100%" ref='picBox' height="50px" class="mb20 left" :padding="[7, 17, 17, 17]">
            <p class="tableP inline mr10"><span>照片名称</span></p>
            <zz-search
              background="rgba(12, 69, 95, 0.4)"
              :width="searchWidth - 150"
              :height="35"
              :searchTop="4"
              holder="请输入照片名称"
              @watchCommon="watchCommon"
              @searchClick="searchClick"
              borderColor="#136387">
            </zz-search>
          </zz-frame>
        </div>
        <div class="search_table_center">
          <zz-frame width="100%" height="50px" class="mb20 left" :padding="[10, 17, 17, 17]">
            <p class="tableP inline mr10" style="margin-top: 7px"><span>拍照日期</span></p>
            <zz-date type="day" background="rgba(12, 69, 95, 0.4)" borderColor="#136387" @change=handleStartDate inputClass="definedWidth"></zz-date> -
            <zz-date type="day" :limit = endlimit background="rgba(12, 69, 95, 0.4)" borderColor="#136387" @change=handleEndDate inputClass="definedWidth"></zz-date>
            <span class="pointer right mr10" style="margin-top: 6px" @click="getPictureList">搜索</span>
          </zz-frame>
        </div>
        <div class="search_table_right">
          <zz-frame width="100%" height="50px" class="mb20 left" :padding="[7, 17, 17, 17]">
            <div class="upload" @click="uploadPic">
              上传照片
            </div>
          </zz-frame>
        </div>
      </div>
      <zz-frame width="100%" :height="`${(contentHeight - 120) / 2}px`" class="mb20 right" v-for="item in picture" :key="item.time">
        <div class="until_title">{{item.time}}</div>
        <div class="picture_table">
          <div class="picture_table_left">
            <div class="project-next" :style="{top: `${(contentHeight - 150) / 4}px`}" @click="prev(item)" :class="{'project-not-allowed': item.translateX === 0}"><i class="iconfont icon-t-arrow"></i></div>
          </div>
          <div class="picture_table_content relative">
            <div
              class="picture-scr"
              ref="videoScrollContent">
              <div
                class="video-transition"
                :style="{
                    transform: `translateX(${item.translateX}px)`,
                    msTransform: `translateX(${item.translateX}px)`,
                    }">
                <div v-for="(image, index) in item.videoPicList" class="picture-content" @click="pushDetail(item, image, index)">
                  <p class="picture-name ellipsis" style="max-width: 200px" :title="image.picName">{{image.picName}}</p>
                  <img :style="{height: `${contentHeight / 2 - 140}px`}" :src="image.src">
                </div>
              </div>
            </div>
          </div>
          <div class="picture_table_right">
            <div class="project-next" :style="{top: `${(contentHeight - 150) / 4}px`}" @click="next(item)" :class="{'project-not-allowed': item.translateX === -1720 || item.videoPicList.length <= 5}"><i class="iconfont icon-r-arrow"></i></div>
          </div>
        </div>
      </zz-frame>
      <zz-paginate v-show="picture.length > 0" :simple="false" :pageSize=2 :isTotalItem="false" @choose="getPictureList" :padding="[0]" class="right mr20"></zz-paginate>

      <uploadPic
        :projectId = "$route.query.pjId"
        :visible="visible"
        @close="close()"
        @addSuccess="addSuccess">
      </uploadPic>
    </div>
</template>

<script>
  import mixin from '../mixin'
  export default {
    name: 'index',
    mixins: [mixin],
    data () {
      return {
        picture: [],
        pageNum: 1,
        pages: 2,
        translateX: 0,
        picName: '',
        shotTime: null,
        videoPicList: [],
        visible: false,
        startDate: '',
        endDate: '',
        searchWidth: 0,  // 搜索框的宽度
        endlimit: [{
          type: 'fromto',
          to: ''
        }]
      }
    },
    mounted () {
      this.setPageSize(2)
      this.getPictureList()
      this.getpicBoxWidth()
    },
    components: {
      uploadPic (resolve) {
        require(['./upload.vue'], resolve)
      }
    },
    methods: {
      getpicBoxWidth () {
        this.$nextTick(() => {
          this.searchWidth = this.$refs.picBox.$el.clientWidth
        })
      },
      setPageSize (pageSize) {
        const obj = {
          currentPage: 1,
          pageSize: pageSize
        }
        this.$store.commit('muQueryPaginate', obj)
      },
      getPictureList () {
        let data = {
          'projectId': this.$route.query.pjId,
          'picName': this.picName,
          'shotTimeStartStr': this.startDate,
          'shotTimeEndStr': this.endDate
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/videoPictureController/index`,
          data: this.$qs.stringify(data, {indices: false}),
          paginate: true
        }).then(res => {
          if (res.data.success) {
            if (res.data.data) {
              this.picture = res.data.data.dataList.map(x => {
                let obj = {}
                let videoPicList = []
                if (x.videoPicList) {
                  videoPicList = x.videoPicList.map(item => {
                    Object.assign(item, {src: ''})
                    return item
                  })
                }
                Object.assign(obj, {time: this.$moment(x.shotTime).format('YYYY年MM月DD日')})
                Object.assign(obj, {timeStr: this.$moment(x.shotTime).format('YYYY-MM-DD')})
                Object.assign(obj, {projectTitle: this.$route.query.name})
                Object.assign(obj, {projectId: this.$route.query.pjId})
                Object.assign(obj, {translateX: 0})
                Object.assign(obj, {videoPicList: videoPicList})
                return obj
              })
              this.getSourceImage()
            } else {
              this.picture = []
            }
          }
        })
      },
      getSourceImage () {
        this.picture.forEach(item => {
          item.videoPicList.forEach(videoPic => {
            this.$store.dispatch({
              type: 'downFile',
              fileUuid: videoPic.picUuid,
              th: 2
            }).then(res => {
              videoPic.src = res
            })
          })
        })
      },
      prev (item) {
        if (item.translateX === 0) {
          return
        }
        item.translateX -= -1720
      },
      next (item) {
        if (item.translateX === -1720 || item.videoPicList.length <= 5) {
          return
        }
        item.translateX += -1720
      },
      pushDetail (item, image, index) {
        this.$router.push({name: 'pictureDetail', query: {pjId: item.projectId, name: item.projectTitle, time: item.timeStr, pictureName: image.name, picIndex: index}})
      },
      uploadPic () {
        this.visible = true
      },
      addSuccess () {
        this.close()
        this.getPictureList()
      },
      close () {
        this.visible = false
      },
      handleStartDate (data) {
        this.endlimit = [{
          type: 'fromto',
          from: data,
          to: ''
        }]
        this.startDate = data
      },
      handleEndDate (data) {
        this.endDate = data
      },
      watchCommon (data) {
        this.picName = data
      },
      searchClick (data) {
        this.picName = data
        this.getPictureList()
      }
    },
    destroyed () {
      this.setPageSize(10)
    }
  }
</script>

<style lang="scss">
  .search_table{
    display: table;
    width: 100%;
    height: 50px;
    color: #a8c5ed;
    .search_table_left{
      width: 40%;
      display: table-cell;
      vertical-align: top;
      position: relative;
    }
    .search_table_center{
      width: 40%;
      padding-left: 20px;
      display: table-cell;
      vertical-align: top;
    }
    .search_table_right{
      padding-left: 20px;
      display: table-cell;
      vertical-align: top;
      position: relative;
    }
  }
  .upload {
    color: #00e8ff;
    font-weight: 700;
    width: 100%;
    height: 100%;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
    &:hover {
      color: #f2f2f2;
    }
  }
  .picture_table{
    display: table;
    width: 100%;
    height: 100%;
    .picture_table_left{
      width: 55px;
      display: table-cell;
      vertical-align: top;
      position: relative;
    }
    .picture_table_content{
      padding-left: 20px;
      display: table-cell;
      vertical-align: top;
      overflow: hidden;
      > div{
        white-space: nowrap;
      }
      .picture-content{
        display: inline-block;
        width: 19%;
        margin-right: 1.3%;
        position: relative;
      }
      .picture-scr{
        height: calc(100% - 45px);
        overflow: hidden;
        top: 0;
      }
      .picture-name{
        bottom: 35px;
        left: 20px;
        position: absolute;
        color: #fff;
      }
      img{
        width: 100%;
        cursor: pointer;
      }
    }
    .picture_table_right{
      width: 55px;
      display: table-cell;
      vertical-align: top;
      position: relative;
    }
  }
  .project-next{
    width: 55px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    background: rgba(71, 159, 205, 0.1);
    cursor: pointer;
    box-shadow: 0 0 5px 2px rgba(71, 159, 205, 0.35) inset;
    position: absolute;
    margin-top: -55px;
    i{
      font-size: 26px;
      font-weight: bolder;
      color: #00e5ff;
    }
  }
  .project-not-allowed{
    cursor: not-allowed;
    opacity: 0.7;
  }
  .video-transition {
    transition: all .5s ease;
  }
  .definedWidth{
    width: 180px;
    height: 30px;
    border: 1px #e2eaee solid;
    font-size: 0.85rem;
    padding: 7px 10px 6px 10px;
    color: #939997;
    border-radius: 0;
    box-sizing: border-box;
    overflow: hidden;
  }
  .t-center {
    .zz-pagination {
      .zz-page{
        .normal {
          a{
            border: 1px rgb(19, 99, 135) solid;
            color: #939997;
          }
        }
      }
      .zz-select-page{
        color: #939997;
        .zz-select-b{
          border: 1px rgb(19, 99, 135) solid;
          color: #939997;
        }
      }
    }
  }

</style>
